<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-title" content="天天来收租">
		<meta name="format-detection" content="telphone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="HandheldFriendly" content="true">
		<meta name="MobileOptimized" content="320">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="screen-orientation" content="portrait">
		<meta name="browsermode" content="application">
		<meta name="full-screen" content="yes">
		<meta name="x5-orientation" content="portrait">
		<meta name="x5-fullscreen" content="true">
		<meta name="x5-page-mode" content="app">
		<title>预览城市</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/preview.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
	</head>
	<body>
		<div class="zone" id="zone">
			<div class="nav-bar" id="nav-bar"></div>

			<div class="main">
				<div class="swiper mySwiper">
					<div class="swiper-wrapper" id="swiper-wrapper">
						<!-- <div class="swiper-slide"> -->
							<!-- <div class="graybg">
								<div class="tit">
									商业街
								</div>
								<div class="shouyi">
									建筑全体收益<br />（未生效）
								</div>
								<div class="center">
									<div class="centerin">
										<img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/suo.png" alt="">
										<span>待解锁</span>
									</div>
								</div>
								<p class="shang">拥有地段图：0/15</p>
							</div> -->
						<!-- </div> -->
						<!-- <div class="swiper-slide">Slide 2</div>
						<div class="swiper-slide">Slide 3</div>
						<div class="swiper-slide">Slide 4</div> -->
					</div>
					<div class="swiper-button-next">
						<img class="cimg" src="http://img.qxgs.cc/tiantianlaishouzu/img/home/r.png" alt="">
					</div>
					<div class="swiper-button-prev">
						<img class="cimg" src="http://img.qxgs.cc/tiantianlaishouzu/img/home/l.png" alt="">
					</div>
					
				</div>
				
				<div class="graybg" id="graybg">
					<div class="tit">
						--
					</div>
					<div class="shouyi">
						--<br />--
					</div>
					<div class="center">
						<div class="centerin">
							<img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/suo.png" alt="">
							<span>待解锁</span>
						</div>
					</div>
					<p class="shang">拥有地段图：-/-</p>
				</div> 
				<!-- <div class="graybg">
					<div class="tit">
						商业街
					</div>
					<div class="shouyi">
						建筑全体收益<br />（未生效）
					</div>
					<div class="center">
						<img class="cimg" src="http://img.qxgs.cc/tiantianlaishouzu/img/home/l.png" alt="">
						<div class="centerin">
							<img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/suo.png" alt="">
							<span>待解锁</span>
						</div>
						<img class="cimg" src="http://img.qxgs.cc/tiantianlaishouzu/img/home/r.png" alt="">
					</div>
					<p class="shang">拥有地段图：0/15</p>
				</div> -->
			</div>
		</div>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/nav-bar.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="../js/preview.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="../js/swiper-bundle.min.js"></script>
		<script>
			let ele = {};
			
			let nowid = getUrlParam('id');
			
			let numlength = '';
			
			let _dataList = '';
			
			let id = getUrlParam('id')
			// console.log(id);
			
			ele.nav_bar = $('#nav-bar');
			ele.zone = $('#zone');
			ele.graybg = $('#graybg');
			ele.swiper_wrapper = $('#swiper-wrapper');
			
			ele.nav_bar.innerHTML = '' +
						'<img onclick="javascript:history.back()" src="http://img.qxgs.cc/tiantianlaishouzu/img/public/fanhui.png" >' +
						'<h1 id="nav-title">' + ('') + '</h1>' +
						'<a >' + '<img id="task" src="" alt="">' + '</a>';
						
			jobList();
			//地段列表
			function jobList() {
				let token = getCookie("token");
				ajax({
					url: API_PATH.JOB_LIST,
					method: 'GET',
					header: {
						'Authorization': token,
					},
					success: res => {
						if (res.code == 1) {
							jobDraw(res.data);
							_dataList = res.data;
							numlength = res.data.length;
							for(let i = 0; i < res.data.length; i++) {
								ele.swiper_wrapper.innerHTML += '<div class="swiper-slide"></div>'
							}
							sweper(id);
						}
						// else openTips(res.msg);
					}
				});
			}
						
			function jobDraw(_data) {
				let html = '';
				let ishas = '';  //0 未拥有  1 已拥有 拥有既生效既解锁
				// let isuse = '';  //0 未使用  1 已使用
				let txt = '';
				let suo = '';
				let suotxt = '';
				
				for (let i = 0; i < _data.length; i++) {
					if(nowid == i) {
						let j = i + 1;
						// console.log(j);
						ele.zone.style.backgroundImage = 'url(http://img.qxgs.cc/tiantianlaishouzu/img/jianzu/bg'+j+'.png)'
						// ele.zone.style.backgroundImage = 'url(' + IMG_DOMAIN + _data[i].bg_logo+ ')';
						// console.log(ele.zone.style.backgroundImage);
						
						if(i == 0) {
							ele.zone.style.backgroundColor = '#33adb8';
						} else if(i == 1) {
							ele.zone.style.backgroundColor = '#a9ad31';
						} else if(i == 2) {
							ele.zone.style.backgroundColor = '#156261';
						} else if(i == 3) {
							ele.zone.style.backgroundColor = '#32b6ee';
						} else if(i == 4) {
							ele.zone.style.backgroundColor = '#a7381a';
						} else if(i == 5) {
							ele.zone.style.backgroundColor = '#e0cbeb';
						}
						ishas = _data[i].is_has == 1 ? '1' : '0';
						// isuse = _data[i].is_use == 1 ? '1' : '0';
						suo = _data[i].is_has == 1 ? '' : '<img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/suo.png" alt="">';
						txt = _data[i].is_has == 1 ? '已生效' : '未生效';
						suotxt = _data[i].is_has == 1 ? '已解锁' : '待解锁';
						
						html = '<div class="tit">'
									+_data[i].name
								+'</div>'
								+'<div class="shouyi">'
									+_data[i].txt+'<br />'+txt
								+'</div>'
								+'<div class="center">'
									+'<div class="centerin">'
										+suo
										+'<span>待解锁</span>'
									+'</div>'
								+'</div>'
								+'<p class="shang">拥有地段图：'+_data[i].debris+'/'+_data[i].active+'</p>'
					}
				}
				ele.graybg.innerHTML = html;
			}
			
			function sweper(slideindex) {
				var swiper = new Swiper(".mySwiper", {
					on: {
						slideChange: function() {
							// console.log(this.activeIndex);
							nowid = this.activeIndex;
							console.log(nowid,id);
							jobDraw(_dataList)
						}
					},
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},

					
				});

				swiper.slideTo(slideindex, 1000, false);
			}
			
		</script>
	</body>
</html>